<template>
  <el-skeleton v-if="loading" :rows="6" animated />

  <div class="home-container">
    <!-- 顶部导航栏 -->
    <!-- 顶部导航栏 -->
    <el-header class="main-header sticky-header">
      <el-row justify="space-between" align="middle">
        <el-col :span="4">
          <div class="logo">
            <img src="/imgs/admin/logo.png" alt="Logo" class="logo-img" />
            <span class="title">旅游定制助手</span>
          </div>
        </el-col>

        <el-col :span="16">
          <div class="search-container">
            <el-input
                v-model="searchQuery"
                placeholder="搜索目的地/行程"
                class="oval-search"
                clearable
                @keyup.enter="handleSearch"
            >
              <template #prefix>
                <el-icon class="search-icon"><Search /></el-icon>
              </template>
            </el-input>
          </div>
        </el-col>

        <el-col :span="4">
          <div class="auth-buttons">
            <el-button
                v-if="!user"
                type="primary"
                @click="goToLogin"
                class="login-btn"
            >
              登录/注册
            </el-button>
            <el-dropdown v-else>
          <span class="user-info">
            <el-avatar :size="30" :src="user.avatar" />
            {{ user.username }}
          </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="router.push('/profile')">
                    个人主页
                  </el-dropdown-item>
                  <el-dropdown-item @click="handleLogout">
                    退出登录
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <!-- 菜单栏 -->
    <div class="sticky-menu-wrapper">
      <el-menu class="quick-nav" mode="horizontal" background-color="#f5f7fa">
        <el-sub-menu index="1">
          <template #title>
        <span class="menu-item-content">
          <el-icon><Plus /></el-icon>
          新建计划
        </span>
          </template>
          <el-menu-item index="1-1" @click="router.push('/create-plan/manual')">
        <span class="menu-item-content">
          <el-icon><EditPen /></el-icon> 手动创建
        </span>
          </el-menu-item>
          <!--          <el-menu-item index="1-2" @click="router.push('/create-plan/ai')">-->
          <!--        <span class="menu-item-content">-->
          <!--          <el-icon><MagicStick /></el-icon> 算法推荐-->
          <!--        </span>-->
          <!--          </el-menu-item>-->
          <el-menu-item index="1-3" @click="router.push('/create-plan/DeepSeek')">
        <span class="menu-item-content">
          <el-icon><Stopwatch /></el-icon> DeepSeek推荐
        </span>
          </el-menu-item>
        </el-sub-menu>

        <el-menu-item index="2" @click="router.push('/my-plans')">
      <span class="menu-item-content">
        <el-icon><SwitchFilled /></el-icon> 我的行程
      </span>
        </el-menu-item>

        <el-menu-item index="3" @click="router.push('/my-orders')">
      <span class="menu-item-content">
        <el-icon><ShoppingCart /></el-icon> 我的订单
      </span>
        </el-menu-item>

        <el-menu-item index="4" @click="router.push('/my-map')">
      <span class="menu-item-content">
        <el-icon><Location /></el-icon> 地图选点
      </span>
        </el-menu-item>

<!--        <el-menu-item index="5" @click="router.push('/my-ticket')">-->
<!--      <span class="menu-item-content">-->
<!--        <el-icon><HelpFilled /></el-icon> 拼车拼团-->
<!--      </span>-->
<!--        </el-menu-item>-->

        <el-menu-item index="6" @click="router.push('/my-shop')">
      <span class="menu-item-content">
        <el-icon><Goods /></el-icon> 商城
      </span>
        </el-menu-item>
      </el-menu>
    </div>


    <!-- 首页轮播图 -->
    <!-- 首页轮播图 ，当作广告展示栏算了，不新加东西了-->
    <div class="carousel-container">
      <el-carousel
          height="400px"
          interval="4000"
          arrow="hover"
          indicator-position="outside"
      >
        <el-carousel-item v-for="index in 6" :key="index">
          <img
              :src="`/imgs/carousel/sample${index}.jpg`"
              :alt="`示例图${index}`"
              class="carousel-image"
          />
        </el-carousel-item>
      </el-carousel>
    </div>


    <!-- 内容区 -->
    <el-main>
      <el-row class="carousel-posts-wrapper" :gutter="30">
        <el-col :span="8">
          <el-carousel height="400px" autoplay interval="3000" arrow="hover" type="card" class="side-carousel">
            <el-carousel-item v-for="i in 4" :key="i">
              <img
                  :src="`/imgs/carousel/sample${i}.jpg`"
                  :alt="`路径图 ${i}`"
                  class="carousel-image"
              />
            </el-carousel-item>
          </el-carousel>

        </el-col>

        <el-col :span="16">
          <div class="home-view">
            <h2>您可能感兴趣的商品</h2>
            <div class="product-list">
              <div
                  v-for="product in products"
                  :key="product.id"
                  class="product-item"
                  @click="goToProduct(product.id)"
              >
                <img :src="product.imageUrl" alt="" class="product-image" />
                <h3>{{ product.title }}</h3>
                <p>价格: ¥{{ product.price }}</p>
              </div>

            </div>
          </div>
        </el-col>
      </el-row>

      <el-row justify="center" align="middle">
        <el-col :span="12">
          <el-card class="merged-card" shadow="hover">
            <template #header>
              <div class="card-header"><h1>欢迎使用旅游定制助手 - 智能路线规划</h1></div>
            </template>
            <div class="card-content">
              <img src="/imgs/admin/home.jpg" alt="Home Banner" class="home-banner" />
              <p class="merged-description">
                在这里，您可以轻松创建、管理、个性化旅游计划，获取智能推荐路线，并与旅行伙伴实时协作，根据您的偏好自动生成最佳旅行路线。
              </p>
            </div>
          </el-card>
        </el-col>

        <el-col :span="12">
          <el-card class="merged-card" shadow="hover">
            <template #header>
              <div class="card-header"><h1>我们为您提供一站式旅游服务</h1></div>
            </template>
            <div class="card-content">
              <img src="/imgs/admin/home2.jpg" alt="Home Banner" class="home-banner" />
              <p class="merged-description">
                在这里，您可以便捷预订酒店机票、智能规划行程路线、整合优质旅游资源，并为您精准匹配景点、交通、餐饮等旅行要素 ，打造从行程策划到落地执行的全流程无忧体验。
              </p>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <router-view />
    </el-main>
    <footer class="footer">
      © 2025 G.T.I Security Organization All rights reserved.
    </footer>

    <el-backtop :right="40" :bottom="80" :visibility-height="200" class="custom-backtop">
      <el-icon size="24"><ArrowUp /></el-icon>
    </el-backtop>
  </div>

  <!-- 返回顶部按钮 -->
  <el-backtop :right="40" :bottom="80" :visibility-height="200" class="custom-backtop">
    <el-icon size="24"><ArrowUp /></el-icon>
  </el-backtop>
</template>

<script setup>
import {ref, onMounted, onUnmounted,computed} from 'vue'
import {useRouter} from 'vue-router'
import {ElMessage, ElMessageBox} from 'element-plus'
import {
  Search, Location, SwitchFilled, HelpFilled,
  ShoppingCart, Stopwatch, Plus, EditPen, MagicStick, Goods
} from '@element-plus/icons-vue'
import {ArrowUp} from '@element-plus/icons-vue'
import {Hotel} from '@element-plus/icons-vue';
const router = useRouter()
const loading = ref(false)
const searchQuery = ref('')
const user = computed(() => {
  const userData = localStorage.getItem('user')
  return userData ? JSON.parse(userData) : null
})
const goToLogin = () => {
  router.push('/login')
}

const handleLogout = () => {
  ElMessageBox.confirm('确定要退出登录吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    localStorage.removeItem('user')
    window.dispatchEvent(new Event('storage'))
    ElMessage.success('已退出登录')
    router.replace('/login')
  }).catch(() => {
  })
}

const updateUser = () => {
  const userData = localStorage.getItem('user')
  user.value = userData ? JSON.parse(userData) : null
}

onMounted(() => {
  updateUser()
  window.addEventListener('storage', updateUser)
})

onUnmounted(() => {
  window.removeEventListener('storage', updateUser)
})

const handleSearch = () => {
  if (searchQuery.value.trim()) {
    const encodedQuery = encodeURIComponent(searchQuery.value.trim())
    window.open(`https://map.baidu.com/search/${encodedQuery}`, '_blank')
  } else {
    ElMessage.warning('请输入要搜索的地点或关键词')
  }
}
const categories = ref([
  {id: 1, name: '景点门票', icon: Location},
  {id: 2, name: '酒店预订', icon: Hotel},
  {id: 3, name: '旅游套餐', icon: MagicStick},
  {id: 4, name: '周边商品', icon: Goods},
]);

const productList = ref([
  // 你可以放初始化商品数据或者后续fetch
]);
const products = ref([
  {
    id: 1,
    title: '故宫门票',
    price: 60,
    imageUrl: 'https://picsum.photos/seed/ticket1/200/200',
    categoryId: 1,
  },
  {
    id: 2,
    title: '长城门票',
    price: 40,
    imageUrl: 'https://picsum.photos/seed/ticket2/200/200',
    categoryId: 1,
    description: '世界文化遗产，位于北京，被誉为"天下第一关"，是古代军事防御工程的杰出代表。',
  }
]);

function goToProduct(id) {
  router.push(`/product/${id}`);
}


</script>
<style scoped>
/* 搜索框及相关 */
.search-container {
  display: flex;
  justify-content: flex-end;
  padding-right: 30px;
}

.oval-search {
  width: 400px;
  transition: all 0.3s;
}

.oval-search :deep(.el-input__wrapper) {
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.oval-search :deep(.el-input__inner) {
  color: #fff;
}

.search-icon {
  color: #fff;
  font-size: 18px;
  margin-right: 8px;
}

.oval-search :deep(.el-input__wrapper.is-focus) {
  background: rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2) inset;
}

/* 头部导航 */
.main-header {
  background: #1352F2;
  padding: 0 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.logo {
  display: flex;
  align-items: center;
  height: 60px;
}

.logo-img {
  height: 40px;
  margin-right: 15px;
}

.title {
  color: #fff;
  font-size: 16px;
  font-weight: bold;
}

.auth-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.login-btn {
  background: linear-gradient(135deg, #3C82F5, #5B9CF8);
  border: none;
}

.user-info {
  display: flex;
  align-items: center;
  color: #fff;
  cursor: pointer;
}

.user-info .el-avatar {
  margin-right: 8px;
}

/* 轮播相关 */

/* 统一el-carousel item 样式 */
.el-carousel .el-carousel-item {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 16px;
  position: relative; /* 保证内部定位正常 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d; /* 优化动画渲染 */
}

/* 主轮播图片 */
.carousel-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 16px;
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
  transition: transform 0.3s ease;
}

.carousel-image:hover {
  transform: scale(1.02);
  cursor: pointer;
}

/* 轮播容器背景，避免切换时露白 */
.carousel-container {
  background-color: #fff;
  padding: 20px 50px;
  box-sizing: border-box;
  overflow: hidden;
  border-radius: 16px;
}

/* 带卡片效果的侧边轮播 */
.side-carousel {
  border-radius: 16px;
  overflow: hidden;
}


/* 文章区域 */
.carousel-posts-wrapper {
  margin-top: 0;
  padding: 30px 30px;
  background-color: #fff;
}

.posts-grid {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}

.post-card {
  height: 180px;
  background-color: #f4f4f4;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: #666;
  transition: transform 0.3s ease;
}

.post-card:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  z-index: 10;
  cursor: pointer;
}

/* 自定义回到顶部按钮 */
.custom-backtop {
  background-color: #409eff;
  color: white;
  border-radius: 50%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 菜单动画 */
.menu-item-content {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.el-menu-item:hover .menu-item-content {
  animation: bounceDown 0.4s forwards;
}

@keyframes bounceDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
  70% {
    transform: translateY(-4px);
  }
  100% {
    transform: translateY(2px);
  }
}

/* 顶部导航栏固定 */
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #1352F2;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 菜单栏固定 */
.sticky-menu-wrapper {
  position: sticky;
  top: 60px;
  z-index: 999;
  background-color: #f5f7fa;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* 底部 */
.footer {
  bottom: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #f5f7fa;
  text-align: center;
  color: #666;
  font-size: 14px;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  user-select: none;
  z-index: 1000;
}

/* 修复 el-carousel 切换时四角露尖的问题 */
:deep(.el-carousel__container),
:deep(.el-carousel__item),
:deep(.el-carousel__item.is-animating),
:deep(.el-carousel__mask) {
  border-radius: 16px !important;
  overflow: hidden !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  transform-style: preserve-3d !important;
}

.home-view {
  padding: 20px;
}

.product-list {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.product-item {
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 12px;
  width: 160px;
  text-align: center;
  border-radius: 6px;
  transition: box-shadow 0.3s;
}

.product-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-image {
  width: 150px;      /* 你想要的宽度 */
  height: 150px;     /* 你想要的高度 */
  object-fit: cover; /* 保持比例裁剪填充整个框 */
  border-radius: 8px; /* 可选，圆角更美观 */
}

@media (max-width: 768px) {
  .main-header {
    padding: 0 15px;
  }

  .el-col {
    &:nth-child(1) { span:4 }
    &:nth-child(2) { span:20 }
  }
}
</style>
